$theme-colors-breakpoint: em(820px);

.wrapper {
  & + & {
    margin-top: var(--mantine-spacing-xl);
  }
}

.color {
  display: flex;
  flex-direction: column;
  flex: 0 0 calc(10% - 7px);

  @media (max-width: $theme-colors-breakpoint) {
    flex: 0 0 calc(20% - 7px);
  }
}

.swatch {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

.title {
  text-transform: capitalize;
  margin-bottom: var(--mantine-spacing-xs);
}

.group {
  display: flex;
  gap: 7px;

  @media (max-width: $theme-colors-breakpoint) {
    flex-wrap: wrap;
  }
}

.colorName {
  @mixin light {
    color: var(--mantine-color-black);
  }

  @mixin dark {
    color: var(--mantine-color-white);
  }
}
